<template>
    <div class="page-wrap">
        <flexbox justify="space-between" class="margin-b-16">
            <flexbox>
                <filter-form @search="handleSearch" ref="filterFormRef">
                    <a-select v-model:value="devType" @change="handleRadioChange">
                        <a-select-option key="1">外包建设</a-select-option>
                        <a-select-option key="2">自主研发</a-select-option>
                    </a-select>
                </filter-form>
            </flexbox>
            <flexbox>
                <a-tooltip title="表格列配置">
                    <column-setting ref="columnSettingRef" class="margin-l-8" :columns="settingColumns" @setColumns="setColumns" />
                </a-tooltip>
            </flexbox>
        </flexbox>
        <custom-table
            autoResize
            rowKey="id"
            size="small"
            :loading="loading"
            :columns="tableColumns"
            :data-source="list"
            :pagination="paginationConfig"
            @change="handleTableChange"
        >
            <template #status="{ text }">
                <flexbox>
                    <h-status-badge :status="text" />
                </flexbox>
            </template>
            <template #versionName="{ text, record }">
                <router-link :to="{ path: '/energyManage/versionReportHistory/detail', query: { id: record.id } }">{{ text }}</router-link>
            </template>
            <template #completePercent="{ record }">
                {{ $filters.valToPercentFilter(record.completePercent) }}
            </template>
            <template #usePercent="{ record }">
                {{ $filters.valToPercentFilter(record.usePercent) }}
            </template>
            <template #planProductCount="{ record }"> {{ record.planProductCount }} / {{ record.onlineProductCount }} </template>
            <template #passTestCast="{ record }">
                <flexbox>
                    <a-tag color="green" style="width: 80px">
                        <flexbox justify="space-between">
                            <span>通过：</span>
                            <span> {{ record.passTestCast }}</span>
                        </flexbox>
                    </a-tag>
                    <DownOutlined style="color: #26a971" @click="record.isCollasped = !record.isCollasped" />
                </flexbox>
                <div v-if="record.isCollasped">
                    <a-tag color="red" style="margin-top: 8px; width: 80px">
                        <flexbox justify="space-between">
                            <span>未通过： </span>
                            <span> {{ record.failTestCast }}</span>
                        </flexbox>
                    </a-tag>
                    <a-tag color="orange" style="margin-top: 8px; width: 80px">
                        <flexbox justify="space-between">
                            <span>不可用：</span>
                            <span> {{ record.naTestCast }}</span>
                        </flexbox>
                    </a-tag>
                    <a-tag color="pink" style="margin-top: 8px; width: 80px">
                        <flexbox justify="space-between">
                            <span>阻塞：</span>
                            <span> {{ record.blockTestCast }}</span>
                        </flexbox>
                    </a-tag>
                </div>
            </template>
            <template #onlineStatus="{ record }">
                <flexbox>
                    <flexbox v-if="record.status === '3'">
                        <a-tag color="red" v-if="record.onlineStatus === '2'">延期</a-tag>
                        <a-tag color="blue" v-if="record.onlineStatus === '1'">正常</a-tag>
                    </flexbox>
                    <MinusOutlined style="font-size: 15px; margin-right: 8px" v-else />
                    <a @click="jumpTo(record.id, record.status)">查看</a>
                </flexbox>
            </template>
            <template #pushStatus="{ record }">
                <a @click="handlePushLeader(record.id)" v-if="record.pushStatus === '1'">推送</a>
                <a style="color: #db1c0b" @click="handleCancelPush(record.id)" v-if="record.pushStatus === '2'">撤回</a>
            </template>
        </custom-table>
        <add-leader-modal ref="addLeaderModalRef" @success="getList" />
    </div>
</template>

<script lang="ts">
import { useMessage } from '@/hooks/common/useMessage';
import { message } from 'ant-design-vue';
import api from '@/api';
import AddLeaderModal from '@/views/energyManage/versionReportHistory/components/AddLeaderModal.vue';
import FilterForm from './components/FilterForm.vue';
import { useTableData, useTableLoading, usePagination, useTableColumns, useTableFormSearch, useTableToolbar } from '@/components/Table/hooks/index';
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
import { DownOutlined, MinusOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { HStatusBadge, CustomTable, ColumnSetting } from '@/components';
import { defineComponent, ref, unref, nextTick } from 'vue';
export default defineComponent({
    components: {
        FilterForm,
        HStatusBadge,
        CustomTable,
        ColumnSetting,
        DownOutlined,
        AddLeaderModal,
        MinusOutlined
    },
    setup() {
        const router = useRouter();
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns, setColumns, settingColumns } = useTableColumns('versionReportZiyanHistory');
        const { list, searchQuery, getList, handleTableChange, setSearchQuery } = useTableData(
            setLoading,
            paginationConfig,
            setPaginationConfig,
            'versionReportHistory'
        );
        const { handleSearch } = useTableFormSearch(setPaginationConfig, setSearchQuery, getList);
        const { exportAllFile } = useTableToolbar(searchQuery, paginationConfig);
        const addLeaderModalRef = ref<any>();
        const columnSettingRef = ref<any>();
        const filterFormRef = ref<any>();
        const devType = ref<string>('2');
        const handleRadioChange = (val) => {
            unref(filterFormRef).handleReset();
            setSearchQuery({
                devType: val,
                systemId: null,
                selectYear: null
            });
            const target = val === '1' ? useTableColumns('versionReportWaicaiHistory') : useTableColumns('versionReportZiyanHistory');
            setColumns(target.settingColumns.value, val === '1' ? 'versionReportWaicaiHistory' : 'versionReportZiyanHistory');
            nextTick(() => {
                unref(columnSettingRef).init();
            });
            unref(filterFormRef).handleReset();
            unref(filterFormRef).systemType = val;
        };
        const jumpTo = (id, status) => {
            router.push({
                path: '/energyManage/timeliness',
                query: {
                    id,
                    status
                }
            });
        };
        setSearchQuery({
            systemId: null,
            selectYear: null,
            devType: unref(devType)
        });
        const handlePushLeader = (id) => {
            unref(addLeaderModalRef).open(id, devType.value);
        };
        const handleCancelPush = (id) => {
            const { createConfirm } = useMessage();
            createConfirm({
                title: '确认撤回当前待办?',
                iconType: 'danger',
                onOk: async () => {
                    const formData = new FormData();
                    formData.append('id', id);
                    formData.append('devType', devType.value);
                    const { success, errorMsg } = await api.versionStatisticsModel.callOA(formData);
                    if (success) {
                        getList();
                    } else {
                        message.error(errorMsg);
                    }
                }
            });
        };
        useMountedAndActivated(getList, false);
        return {
            exportAllFile,
            list,
            tableColumns,
            settingColumns,
            loading,
            paginationConfig,
            handleTableChange,
            handleSearch,
            getList,
            setColumns,
            columnSettingRef,
            filterFormRef,
            devType,
            handleRadioChange,
            jumpTo,
            addLeaderModalRef,
            handlePushLeader,
            handleCancelPush
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 16px 24px 12px 24px;
    background: #fff;
}
</style>